var swiper = new Swiper('.swiper-container', {
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    speed: 700,
    allowTouchMove: false,
    lazy: {
        loadPrevNext: true,
        loadPrevNextAmount: 3,
    },
    centeredSlides: true,
    spaceBetween: 50,
    slidesOffsetBefore: 40,
    loop: true,
    slidesPerView: 'auto',
    on: {
        slideChangeTransitionEnd: function () {
            this.slides.transition(this.params.autoplay.delay + this.params.speed).transform('translate3d(-60px, 0, 0)');
        },
        slideChangeTransitionStart: function () {
            this.slides.transition(this.params.speed).transform('translate3d(0, 0, 0)');
        },
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<div class="' + className + '"><span></span><i></i></div>';
        },
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});
window.onresize = function () {
    swiper.update();
}


slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16	             
radius = slideW*0.5/Math.sin(Math.PI/16);//半径。圆心并不是视点中心，视点在1200px

carouselSwiper = new Swiper('#carousel .swiper', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: false,
	loop: true,
	loopedSlides: 4,
	grabCursor:true,
//	autoplay: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		//clickable :true,
	},
	on: {
		progress: function(swiper, progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				translateX = (slideProgress+1.5)*( slideW/3 - Math.cos((slideProgress+1.5)*0.125*Math.PI)*slideW*1.1/3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
				rotateY = (slideProgress+1.5)*22.5 ;//图片角度
				translateZ = ( radius - Math.cos((slideProgress+1.5)*0.125*Math.PI)*radius - 150) + 'px';//调整图片远近，刚好4个在画框内
				slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');

			}
		},
		setTransition: function(swiper, transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})